<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="input">
    <script>
        // 1.防抖
        // 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时
        // 应用场景：搜索框输入，用户停止输入后开始搜索  按钮点击，防止多次点击
        // （连续不断触发时不调用，触发完后过一段时间调用），像仿百度搜索，就应该用防抖，当我连续不断输入时，
        // 不会发送请求；当我一段时间内不输入了，才会发送一次请求；如果小于这段时间继续输入的话，时间会重新计算，也不会发送请求。
        function mydebounce(fn, delay) {
            // 1. 创建一个变量，记录上一次定时器
            let timer = null
            // 2. 触发事件时执行函数
            return function () {
                // 2.1 取消上一次的定时器，（第一次执行时，timer应该为null）
                if (timer) clearTimeout(timer)
                // 2.2 延迟执行传入fn的回调
                timer = setTimeout(() => {
                    fn()
                    // 2.3 函数执行完成后，需要将timer重置
                    timer = null
                }, delay)
            }
        }

        // 调用​
        const inputDOM = document.getElementById('input')
        inputDOM.addEventListener('keyup', mydebounce(() => { console.log(inputDOM.value) }, 500))

        function debounce(func, wait) {
            let timeout;
            return function () {
                const context = this;
                const args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(context, args), wait);
            };
        }

        // 使用示例
        window.addEventListener('resize', debounce(function () {
            console.log('窗口大小已调整');
        }, 500));
    </script>
</body>

</html>